<template>
  <div class="wallet-container">
    <div class="balance-section">
      <span class="balance-label">我的余额</span>
      <span class="balance-amount">￥{{ balance }}</span>
      <button class="recharge-btn" @click="recharge">充值</button>
    </div>

    <div class="transactions-section">
      <span class="section-title">交易记录</span>
      <div class="transaction-list">
        <div v-for="(transaction, index) in transactions" :key="index" class="transaction-item">
          <span class="transaction-name">{{ transaction.name }}</span>
          <span class="transaction-amount" :class="{ 'income': transaction.amount > 0 }">
            {{ transaction.amount > 0 ? '+' : '' }}{{ transaction.amount }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      balance: 1000.00,
      transactions: [
        {
          name: '购物',
          amount: -50.00
        },
        {
          name: '充值',
          amount: 100.00
        },
        {
          name: '退款',
          amount: 30.00
        },
        {
          name: '购物',
          amount: -80.00
        },
      ]
    };
  },
  methods: {
    recharge() {
      // 这里可以添加充值逻辑
      this.$toast('充值功能待实现');
    }
  }
}
</script>

<style>
	.wallet-container {
		padding: 40rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.balance-section {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 40rpx;
		margin-bottom: 40rpx;
		text-align: center;
	}

	.balance-label {
		font-size: 28rpx;
		color: #666;
	}

	.balance-amount {
		font-size: 60rpx;
		font-weight: bold;
		margin: 20rpx 0;
		display: block;
	}

	.recharge-btn {
		background-color: #007aff;
		color: #ffffff;
		border: none;
		border-radius: 10rpx;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
	}

	.transactions-section {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 40rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}

	.transaction-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.transaction-name {
		font-size: 28rpx;
		color: #333;
	}

	.transaction-amount {
		font-size: 28rpx;
		color: #ff4d4f;
	}

	.transaction-amount.income {
		color: #52c41a;
	}
</style>